<template>
    <div class="songListItem2">
        <div class="item" @click="getList">
            <div class="songListDetailItem songListDetailImg">
                <img class="auto-img" :src="songListData.coverImgUrl||songListData.picUrl" alt="">
            </div>
            <div class="songListDetailItem songListDetailContent">
                <div class="songListDetailTitle">{{ songListData.name }}</div>
                <div class="songListDetailText">{{ songListData.description ||songListData.company}}</div>
            </div>
            <div class="songListDetailItem songListDetailRight"><van-icon name="arrow" color="#ddd" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "songListItem2",
    props: {
        songListData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        getList() {
            this.$emit('getSonDetail')
        }
    }
}
</script>

<style lang="less" scoped>
.item {
    margin: 10px 10px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;


    .songListDetailImg {
        width: 15%;
        border-radius: 10px;
        overflow: hidden;
    }

    .songListDetailRight {
        width: 5%;
    }

    .songListDetailTitle {
        font-size: 15px;
        // height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .songListDetailContent {
        // margin-left: 15px;
        width: 65%;
        font-size: 10px;


    }

    .songListDetailText {
        // height: 15px;
        margin-top: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgb(146, 145, 145);
    }
}
</style>